<template>
  <view class="main-container">
    <!-- 根据当前选中的tab条件渲染内容 -->
    <view class="content-container">
      <view v-if="currentTab == 0" class="page-container">
        <home-page></home-page>
      </view>

      <view v-if="currentTab == 1" class="page-container">
        <study-page></study-page>
      </view>

      <view v-if="currentTab == 2" class="page-container">
        <rank-page></rank-page>
      </view>

      <view v-if="currentTab == 3" class="page-container">
        <my-page ref="myRef"></my-page>
      </view>
    </view>

    <!-- 自定义tabbar -->
    <view class="custom-tabbar between">
      <view
        v-for="item in tabBarList"
        :key="item.url"
        class="tabbar-item"
        :class="{ active: currentTab == item.url }"
        @click="switchTab(item)"
      >
        <view class="tabbar-icon">
          <i
            class="font48 iconfont"
            :class="currentTab == item.url ? item.icon + '-check' : item.icon"
          ></i>
        </view>
        <text class="tabbar-text font24">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
// 导入各个页面组件
import HomePage from "../home/index.vue";
import MyPage from "../my/index.vue";
import RankPage from "../rank/index.vue";
import StudyPage from "../study/index.vue";

export default {
  components: {
    HomePage,
    MyPage,
    RankPage,
    StudyPage,
  },
  data() {
    return {
      currentTab: 0,
      tabBarList: [
        { name: "首页", icon: "icon-home", url: 0 },
        { name: "学习中心", icon: "icon-lingong", url: 1 },
        { name: "排行榜", icon: "icon-shop", url: 2 },
        { name: "我的", icon: "icon-mine", url: 3 },
      ],
    };
  },
  onLoad(option) {
    this.currentTab = option.url || 0;
  },
  onShow() {
    this.handleSetIdentityType();
  },
  methods: {
    handleSetIdentityType() {
      if (this.currentTab == 3) {
        const identityType = uni.getStorageSync("currentIdentityType");
        console.log("identityType", identityType);
        if (identityType) {
          this.$refs.myRef.handleSetIdentityType(identityType);
          // 清理存储
          uni.removeStorageSync("currentIdentityType");
        }
      }
    },
    switchTab(e) {
      if (this.currentTab === e.url) return;
      this.currentTab = e.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.page-container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.custom-tabbar {
  display: flex;
  // min-height: 100rpx;
  background: #ffffff;
  padding: 18rpx 30rpx env(safe-area-inset-bottom);
  box-shadow: 0rpx -4rpx 25rpx 0rpx rgba(0, 0, 0, 0.03);
  z-index: 100;

  .tabbar-item {
    //flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $uni-text-color-grey;
    transition: all 0.3s;
    position: relative;
    padding: 0 20rpx;

    // &::after {
    // 	content: '';
    // 	position: absolute;
    // 	bottom: -6rpx;
    // 	left: 50%;
    // 	transform: translateX(-50%) scale(0);
    // 	width: 16rpx;
    // 	height: 6rpx;
    // 	border-radius: 3rpx;
    // 	background-color: $uni-text-color;
    // 	opacity: 0;
    // 	transition: all 0.3s ease;
    // }

    &:nth-child(1) {
      padding-left: 0;
    }

    &:nth-child(5) {
      padding-right: 0;
    }

    .tabbar-icon {
      height: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6rpx;

      i {
        font-size: 44rpx;
        transition: transform 0.2s ease;
      }

      .shequ-icon {
        width: 100rpx;
        height: 100rpx;
        margin-top: -38rpx;
      }
    }

    &:active {
      i {
        transform: scale(0.9);
      }
    }
  }

  .active {
    color: $uni-color-primary;

    &::after {
      opacity: 1;
      transform: translateX(-50%) scale(1);
    }

    i {
      font-weight: 400;
      // transform: scale(1.05);
    }
  }
}
</style>
